import React from 'react';
import {Image} from "semantic-ui-react";
import logo from "../../logo.svg";
import { Link } from "react-router-dom"
import EVTools from "../../utils/evtools";
import Cookie from 'react-cookies'

class Header extends React.Component {

    componentWillMount() {
        this.setState({username: Cookie.load("Username")})
    }

    componentDidMount(){
        this.eventEmitter = EVTools.addListener("Username",(username)=>{
            this.setState({
                username
            })
        });
    }

    componentWillUnmount(){
        EVTools.removeListener(this.eventEmitter);
    }

    render() {
        return (
            <header className="ui inverted menu App-header">
                <div className={'item'}>
                    <Image src={logo} className={"App-logo"} inline/>
                    <Link
                        to="/"
                        className="Logo-link"
                    >
                        Gitask
                    </Link>
                </div>
                <div className={'right item'}>
                    <Link
                        to="/token"
                        className="menu-item"
                    >
                        Hi,
                        <span className="authored">
                            {typeof(this.state.username) === 'string' ? this.state.username : "Guest"}
                        </span>
                        Gitee 授权管理 ->
                    </Link>
                </div>
            </header>
        )
    }
}

export default Header